<template>
  <div class="full-screen">
    <div class="login-container">
      <p>系统登录</p>
      <el-form :rules="loginRule" ref="ruleFormRef" :model="loginForm">
        <el-form-item prop="userName">
          <el-input
            placeholder="请输入用户名"
            autocomplete="new-password"
            v-model="loginForm.userName" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="请输入登录密码"
            type="password"
            autocomplete="new-password"
            v-model="loginForm.password" />
        </el-form-item>
        <el-button type="primary" @click="submitLogin(ruleFormRef)">登录</el-button>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from '@/store'
import router1 from '@/router';

const router = useRouter()
const route = useRoute()
const store = useStore()

let loginForm = ref({
  userName: '',
  password: ''
})
const ruleFormRef = ref()
// 登录逻辑
const submitLogin = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    console.log(valid, fields)
    if (valid) {
      // 登录
      store.commit('setUser', loginForm.value)
      let redirect = route.query?.redirect
      router.push(redirect || '/')
    } else {
      console.log('error submit!', fields)
    }
  })
}

// 登录校验
const loginRule = {
  userName: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
  password: [{ required: true, trigger: 'blur', message: '请输入密码' }]
}
</script>
<style lang="scss" scoped>
:deep(.el-input__inner) {
  background-color: rgb(0, 0, 0, 0.2);
  border: 1px solid #1f2937;
  border-color: #1f2937;
  color: white;
}
.full-screen {
  width: 100vw;
  height: 100vh;
  background-color: rgb(31, 41, 55);
  .login-container {
    width: 400px;
    // height: 400px;
    margin: 0 auto;
    padding-top: 25vh;
    p {
      text-align: center;
      color: #efefef;
      line-height: 60px;
      font-size: 22px;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .el-button {
      width: 100%;
    }
  }
}
</style>
